<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>预算管理系统 - 简洁版</title>
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💰</text></svg>">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/notification.css">
  <style>
    /* 简洁版专用样式 */
    body { background: #f5f7fa; }
    .main-container { max-width: 1200px; margin: 0 auto; padding: 20px; }
    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding: 15px 20px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .user-info { display: flex; align-items: center; gap: 15px; }
    .btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
    .btn-primary { background: #4285f4; color: white; }
    .btn-success { background: #34a853; color: white; }
    .btn-danger { background: #ea4335; color: white; }
    .btn-secondary { background: #666; color: white; }
    .btn:hover { opacity: 0.9; }
    
    .books-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      margin-bottom: 20px;
    }
    .book-card {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      cursor: pointer;
      transition: transform 0.2s;
      border-left: 4px solid;
    }
    .book-card:hover { transform: translateY(-2px); }
    .book-card.active { box-shadow: 0 4px 12px rgba(66,133,244,0.3); }
    .add-book-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #f5f5f5;
      border: 2px dashed #ccc;
      color: #666;
      font-size: 48px;
    }
    
    .section-card {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      margin-bottom: 20px;
    }
    .section-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 2px solid #4285f4;
    }
    
    .main-content { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    @media (max-width: 768px) { .main-content { grid-template-columns: 1fr; } }
    
    .form-group { margin-bottom: 15px; }
    .form-group label { display: block; margin-bottom: 5px; color: #666; }
    .form-group input, .form-group select {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
    
    .record-item {
      padding: 12px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .record-amount { font-weight: bold; font-size: 16px; }
    .record-amount.income { color: #34a853; }
    .record-amount.expense { color: #ea4335; }
    .empty-state { text-align: center; padding: 40px; color: #999; }
    
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }
    .modal.active { display: flex; }
    .modal-content {
      background: white;
      padding: 30px;
      border-radius: 8px;
      max-width: 500px;
      width: 90%;
      max-height: 80vh;
      overflow-y: auto;
    }
    .version-badge {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 12px;
      margin-left: 10px;
    }
  </style>
</head>
<body>
  <div class="main-container">
    <!-- 顶部导航栏 -->
    <div class="top-bar">
      <div class="user-info">
        <h2>💰 预算管理系统<span class="version-badge">简洁版</span></h2>
        <span id="userName">用户</span>
      </div>
      <div style="display: flex; align-items: center; gap: 10px;">
        <button class="btn btn-primary" onclick="window.location.href='import.html'" title="导入微信/支付宝账单">📥 账单导入</button>
        <button class="btn btn-primary" onclick="window.location.href='analysis.html'" title="智能财务分析">📊 智能分析</button>
        <button class="btn btn-success" onclick="switchToAdvanced()" title="切换到创新版">🚀 创新版</button>
        <button class="btn btn-secondary" onclick="showPINModal()">🔒 PIN设置</button>
        <button class="btn btn-danger" onclick="logout()">退出登录</button>
      </div>
    </div>

    <!-- 账本列表 -->
    <div class="books-section">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
        <h3 style="margin: 0;">我的账本</h3>
        <button class="btn btn-primary" onclick="showJoinModal()">➕ 加入账本</button>
      </div>
      <div class="books-grid" id="booksGrid">
        <div class="book-card add-book-card" onclick="showCreateBookModal()">
          <div>+</div>
          <div style="font-size: 14px;">创建账本</div>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 添加记录 -->
      <div class="section-card">
        <h3 class="section-title">📝 添加记录</h3>
        <form id="recordForm">
          <div class="form-group">
            <label>类型</label>
            <select id="recordType" required>
              <option value="">请选择</option>
              <option value="income">收入</option>
              <option value="expense">支出</option>
            </select>
          </div>
          <div class="form-group">
            <label>金额</label>
            <input type="number" id="recordAmount" step="0.01" min="0" required placeholder="0.00">
          </div>
          <div class="form-group">
            <label>分类</label>
            <select id="recordCategory" required>
              <option value="">请先选择类型</option>
            </select>
          </div>
          <div class="form-group">
            <label>日期</label>
            <input type="date" id="recordDate" required>
          </div>
          <div class="form-group">
            <label>备注</label>
            <input type="text" id="recordRemark" placeholder="可选">
          </div>
          <button type="submit" class="btn btn-primary" style="width: 100%;">添加记录</button>
        </form>
      </div>

      <!-- 统计数据 -->
      <div class="section-card">
        <h3 class="section-title">📊 收支统计</h3>
        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin-bottom: 20px;">
          <div style="text-align: center;">
            <div style="color: #666; font-size: 12px;">总收入</div>
            <div id="totalIncome" style="color: #34a853; font-size: 24px; font-weight: bold;">¥0</div>
          </div>
          <div style="text-align: center;">
            <div style="color: #666; font-size: 12px;">总支出</div>
            <div id="totalExpense" style="color: #ea4335; font-size: 24px; font-weight: bold;">¥0</div>
          </div>
          <div style="text-align: center;">
            <div style="color: #666; font-size: 12px;">余额</div>
            <div id="totalBalance" style="font-size: 24px; font-weight: bold;">¥0</div>
          </div>
        </div>
        <div id="categoryStats"></div>
      </div>
    </div>

    <!-- 记录列表 -->
    <div class="section-card">
      <h3 class="section-title">📋 收支记录</h3>
      <div class="records-list" id="recordsList" style="max-height: 400px; overflow-y: auto;"></div>
    </div>

    <!-- 账本操作按钮 -->
    <div style="margin-top: 20px; display: none; gap: 10px;" id="bookActions">
      <button class="btn btn-success" onclick="showShareModal()">📤 分享账本</button>
      <button class="btn btn-primary" onclick="showJoinModal()">➕ 加入账本</button>
      <button class="btn btn-secondary" onclick="showMembersModal()">👥 查看成员</button>
    </div>

  </div>

  <!-- 模态框省略，使用与高级版相同的模态框HTML -->
  <!-- 创建账本模态框、PIN码模态框、分享模态框等 -->

  <script src="./js/notification.js?v=2"></script>
  <script src="./js/alert-helper.js?v=3"></script>
  <script src="./js/api.js?v=15"></script>
  <script src="./js/main-simple.js?v=3"></script>
  <script>
    // 版本切换函数
    function switchToAdvanced() {
      if (confirm('切换到创新版将加载更多功能，是否继续？')) {
        localStorage.setItem('preferredVersion', 'advanced');
        // 添加时间戳强制刷新，避免缓存
        window.location.href = './index.html?t=' + Date.now();
      }
    }
    
    // 检查版本偏好
    window.addEventListener('load', () => {
      const preferred = localStorage.getItem('preferredVersion');
      if (preferred === 'advanced') {
        // 用户偏好创新版，提示是否切换
        console.log('检测到用户偏好创新版');
      }
    });
  </script>
</body>
</html> 